<template>
    <view style="height: 100%">
      <scroll-view :scroll-y="true" :scroll-x="false" class="scroll" @scrolltolower="bindlower">
        <view class="swiper">
            <block v-for="(item, index) in orderList" :key="index">
                <!-- parse <template is="myorder" :data="item"/> -->
                <block name="myorder">
                    <view class="item" @tap="toProductDetail" :id="item.productId">
                        <view class="ddhead">
                            <text class="state">
                                <block>{{ item.productName }}</block>
                            </text>
                            <text class="ddhao">订单号：{{ item.orderNo }}</text>
                        </view>
                        <block v-for="(item, index) in item.productPics" :key="index">
                            <view class="ddimg">
                                <image :src="item" />
                            </view>
                        </block>
                        <view class="ddfooter">
                            <text class="jr">
                                <block v-if="item.status == '0'">未支付</block>
                                <block v-else-if="item.status == '1'">已支付</block>
                            </text>
                            <text class="jr">￥{{ item.payAmount }}</text>
                            <text class="jrr" v-if="item.address">配送：{{ item.address }}</text>
                            <view v-if="item.status == 0">
                                <view class="btn" :id="item.id" @tap="pay">去支付</view>
                            </view>
                            <view v-if="item.status == 0">
                                <view class="btn cancel" :id="item.orderNo" @tap="cancelOrder">取消订单</view>
                            </view>
                            <view v-if="item.status == 1">
                                <view class="btn cancel" :id="item.orderNo" @tap="cancelOrder">删除</view>
                            </view>
                        </view>
                    </view>
                </block>
            </block>
            <view class="prompt" v-if="orderList.length == 0">
                <image src="/static/images/dd.png" />
                <text>您没有任何订单</text>
            </view>
        </view>
        <!-- template对应的原始代码，为保证正常显示，已对其进行隐藏。 -->
        <block name="myorder" v-if="false">
            <view class="item">
                <view class="ddhead">
                    <text class="state">
                        <block>{{ item.productName }}</block>
                    </text>
                    <text class="ddhao">订单号：{{ item.orderNo }}</text>
                </view>
                <block v-for="(item, index) in item.productPics" :key="index">
                    <view class="ddimg">
                        <image :src="item" />
                    </view>
                </block>
                <view class="ddfooter">
                    <text class="jr">
                        <block v-if="item.status == '0'">未支付</block>
                        <block v-else-if="item.status == '1'">已支付</block>
                    </text>
                    <text class="jr">￥{{ item.payAmount }}</text>
                    <text class="jrr" v-if="item.address">配送：{{ item.address }}</text>
                    <view v-if="item.status == 0">
                        <view class="btn" :id="item.id" @tap="pay">去支付</view>
                    </view>
                    <view v-if="item.status == 0">
                        <view class="btn cancel" :id="item.orderNo" @tap="cancelOrder">取消订单</view>
                    </view>
                    <view v-if="item.status == 1">
                        <view class="btn cancel" :id="item.orderNo" @tap="cancelOrder">删除</view>
                    </view>
                </view>
            </view>
        </block>
      </scroll-view>  
    </view>
</template>

<script>
var config = require('../../config.js');
var http = require('../../utils/httpHelper.js');
var app = getApp();
export default {
    data() {
        return {
            userInfo: {},
            orderList: [],
            timer: {},

            orderPage: {
                current: 1,
                pageSize: 10,
                total: 0
            },

            datingList: ''
        };
    },
    onLoad: function () {
        var that = this;
        let userInfo = uni.getStorageSync('user');
        that.setData({
            userInfo: userInfo
        });
    },
    onShow: function () {
        var that = this;
        this.getlist(function (list) {
            that.setData({
                orderList: list
            });
        });
    },
    methods: {
        getMoreData() {
            var that = this;
            that.orderPage.current++;
            that.getlist(function (list) {
                let yList = that.orderList;
                yList = yList.concat(list);
                that.setData({
                    datingList: yList
                });
            });
        },

        getlist: function (callback) {
            var that = this;
            http.httpPost(
                config.clubApi.getOrderPayList,
                {
                    pageNo: that.orderPage.current,
                    pageSize: that.orderPage.pageSize,
                    createBy: that.userInfo.userId,
                    appId: config.APPID,
                    productType:-2
                },
                function (res) {
                    if (res.code == '200') {
                        var list = res.data.pageData;
                        if (typeof callback == 'function') {
                            callback(list);
                        }
                    }
                }
            );
        },

        pay: function (e) {
            uni.showToast({
                title: '订单支付成功!',
                icon: 'success',
                duration: 1000
            });
            //支付成功订单
            var orderid = e.target.id;
            this.updateOrderInfo(orderid, 1);
        },

        cancelOrder: function (e) {
            var that = this;
            http.httpPut(
                config.clubApi.delOrder,
                {
                    orderNo: e.target.id
                },
                function (res) {
                    if (res.code == '200') {
                        uni.showToast({
                            title: '取消订单成功!',
                            icon: 'success',
                            duration: 1000
                        });
                        that.getlist(function (list) {
                            that.setData({
                                orderList: list
                            });
                        });
                    }
                }
            );
        },

        //处理分页
        bindlower: function (e) {
          if(this.timer != null){
            clearTimeout(this.timer)
          }
          this.timer = setTimeout(()=>{
            this.getMoreData();
          },500)
        },
        toProductDetail: function (e) {
            var id = e.currentTarget.id;
            let userInfo = uni.getStorageSync('user');
            if (userInfo) {
              uni.navigateTo({
                  url: '../detail/index?id=' + id +'&inviteId=' + userInfo.userId
              });
            }else {
              uni.navigateTo({
                  url: '../detail/index?id=' + id
              });
            }
        }
    }
};
</script>
<style lang="scss">
@import './index.scss';
@import '@/pages/order/index.scss';
</style>
